<template>
    <el-dialog
            v-model="searchFlag"
            title="搜索"
            width="40%"
            @open="search"
            :before-close="handleClose">
        <el-input placeholder="随便搜搜看吧！"
                  v-model="store.searchText"
                  v-loading="loading"
                  @keydown.enter="search"
                  :clearable="true">
            <template #prefix>
                <icon-search theme="outline" size="18" fill="#a4a4a8"/>
            </template>
            <template #append>
                <el-button @click="search">搜索</el-button>
            </template>
        </el-input>
        <el-divider></el-divider>
        <el-scrollbar v-loading="loading" height="400px" style="text-align: center">
            <el-image v-if="blogs.length === 0" src="/nodata.png" style="width: 50%;"></el-image>
            <div style="text-align: left" v-else>
                <div v-for="blog in blogs" :key="blog.id" style="padding: 10px">
                    <el-link style="font-size: 1.3em;color: #3eaf7c" :href="'/article/'+blog.blogId">
                        {{ blog.blogTitle }}
                    </el-link>
                    <br>
                    <span>{{ blog.blogAbstract }}</span>
                    <el-divider></el-divider>
                </div>
            </div>
            <!--            <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>-->
        </el-scrollbar>

    </el-dialog>
</template>

<script>

import pinia from "@/store/pinia";
import searchStore from "@/store/searchStore";

const store = searchStore(pinia);

export default {
    name: "Search",
    computed: {
        searchFlag() {
            return this.store.searchFlag
        },
    },
    data() {
        return {
            store,
            blogs: [],
            loading: false,
        }
    },
    methods: {
        handleClose() {
            this.store.setSearchFlag(false)
        },
        async search() {
            this.loading = true
            let {data: result} = await this.$http.get("/api/search/globalSearch", {params: {searchText: this.store.searchText}})
            this.blogs = result.dataMap.blogs
            console.log(this.blogs)
            this.loading = false
        }
    }
}
</script>

<style scoped>

</style>